<template>
	<ppl-navbar title="发布校园兼职" bgColor="#E3EEFF">
		<view @click="back">
			<van-icon name="arrow-left" size="40rpx" />
		</view>
	</ppl-navbar>
	<view class="wrapper bg-linear">
		<view class="p-15 bg-color boder-r-10 shadow1">
			<view class="">
				填写标题
			</view>
			<input @input="tit" type="text" placeholder="请填写标题"
				style="border: 1rpx solid #4e9bff; border-radius: 20rpx; padding: 10rpx 20rpx; margin: 10rpx 0;" />
			<ppl-textarea @onChange="onChangeNeed">
				<view slot="title">填写需求</view>
			</ppl-textarea>

			<!-- 图片上传组件 -->
			<ppl-upload :initial-files="images.split(',').filter(url => url)" @file-change="handleFileChange"
				:max-count="4" @click-preview="handlePreview" />

			<!-- 图片预览组件 -->
			<van-image-preview v-model="showPreview" :images="previewImages" @close="showPreview = false" />

			<ppl-tips :tips="tips" />
		</view>
	</view>
	<view class="submit-button" @click="sub">
		<van-button type="info" round block>立刻发布</van-button>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		addCampusPartTimeJob
	} from "@/package/api/insertList.js"

	// 页面提示信息
	const tips = ref(['上传二维码照片，方便联系', '发布需要实名认证审核通过'])
	// 图片URL列表（拼接后）
	const images = ref('')
	// 兼职要求
	const requirements = ref('')
	// 兼职标题
	const title = ref('')
	// 图片预览相关
	const showPreview = ref(false)
	const previewImages = ref([])

	// 返回上一页
	const back = () => {
		uni.navigateBack();
	}

	// 处理图片上传后的回调
	const handleFileChange = (fileUrls) => {
		console.log('接收到图片URL列表:', fileUrls);
		images.value = fileUrls.join(',');
		console.log('更新后的图片URL:', images.value);
	};

	// 处理图片预览
	const handlePreview = (index, urls) => {
		previewImages.value = urls;
		showPreview.value = true;
	};

	// 处理需求内容变更
	const onChangeNeed = (e) => {
		requirements.value = e;
	}

	// 处理标题变更
	const tit = (e) => {
		title.value = e.target.value;
	}

	// 提交表单
	const sub = () => {
		// 获取当前用户ID（假设已登录并存储在本地）
		const publisherId = uni.getStorageSync("user_id");
		// 获取当前学校ID
		const schoolId = uni.getStorageSync("school_id");

		// 表单验证
		if (!title.value) {
			uni.showToast({
				title: "请填写标题",
				icon: "none"
			})
			return
		}

		if (!requirements.value) {
			uni.showToast({
				title: "请填写需求",
				icon: "none"
			})
			return
		}

		if (!images.value) {
			uni.showToast({
				title: "请上传图片",
				icon: "none"
			})
			return
		}

		if (!publisherId) {
			uni.showToast({
				title: "未获取到用户ID，请重新登录",
				icon: "none"
			})
			return
		}

		if (!schoolId) {
			uni.showToast({
				title: "未获取到学校ID，请重新选择学校",
				icon: "none"
			})
			return
		}

		// 构造请求数据
		const requestData = {
			title: title.value,
			requirements: requirements.value,
			publisherId: publisherId,
			images: images.value,
			schoolId: schoolId
		};

		console.log('提交的兼职数据:', requestData);

		// 调用后台接口
		addCampusPartTimeJob(requestData)
			.then(res => {
				if (res.code === 200) {
					// 成功提示并返回上一页
					uni.showToast({
						title: "发布成功",
						icon: "success"
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					// 处理其他错误码
					if (res.code === 20) {
						// 需要实名认证
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});

						setTimeout(() => {
							uni.navigateTo({
								url: '/package/pages/shimingrenzheng/shimingrenzheng'
							});
						}, 1100);
					} else {
						// 其他错误
						uni.showToast({
							title: res.msg || "发布失败，请重试",
							duration: 1500,
							icon: "none"
						});
					}
				}
			})
			.catch(error => {
				console.error('发布兼职请求失败:', error);
				uni.showToast({
					title: "网络错误，请稍后重试",
					duration: 1500,
					icon: "none"
				});
			});
	}
</script>

<style scoped>
	.submit-button {
		padding: 50rpx 220rpx;
	}
</style>